<template>
  <div id="conentpage" class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-row class="warp">
        <el-col :span="24" class="warp-main">
          <el-form ref="infoForm" label-width="140px">
            <el-row>
              <el-col :span="20">
                <el-form-item label="预通知一级审核人">
                  <el-button type="primary" @click="chooseStudent" class="mb-10" size="small" plain>选择一级审核人</el-button>
                  <div>
                    <el-tag
                        :key="tag.id"
                        v-for="(tag,index) in dynamicTags"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(index)"
                        class="mr-10"
                    >{{ tag.realname }}
                    </el-tag>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="4"></el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item>
                  <el-button type="primary" @click="onSubmit" size="small">确认提交</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="8"></el-col>
              <el-col :span="8"></el-col>
            </el-row>

          </el-form>
        </el-col>
      </el-row>
    </div>
    <MultipleTeacherModle :visible.sync="studentVisible" @studentFn="studentFn"
                          :dynamicTagsArray="dynamicTagsArray"></MultipleTeacherModle>

  </div>
</template>

<script>
import {notice_inside_examine_user} from "@/api/admin/notice"
export default {
  components: {},
  data() {
    return {
      studentVisible: false,
      dynamicTags: [],
      dynamicTagsArray: {}
    }
  },
  created() {
    this.InitFn()
  },
  mounted() {
  },
  methods: {
    InitFn() {
      notice_inside_examine_user().then(res=>{
        console.log('res====>', res)
        this.dynamicTags = res.list
      })
    },
    onSubmit() {
      // 提交 this.$refs.infoForm.validate，这是表单验证
      console.log('数据提交', this.infoForm)
      if (!this.dynamicTags.length) {
        this.$message.error('请设置一级审核人员')
        return
      }
      let a_ = []
      for (let item of this.dynamicTags) {
        a_.push(item.id)
      }
      this.$post(this.api.system_setting, {notice_inside_user:a_.join(',')}).then(res => {
        if (res.code === 0) {
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    chooseStudent() {
      let list = {}
      for (let item of this.dynamicTags) {
        list[item.id] = item
      }
      this.dynamicTagsArray = this.getJson(list)
      this.studentVisible = true
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    studentFn(option) {
      let list = [];
      for (let i in option) {
        list.push(option[i])
      }
      this.dynamicTags = this.getJson(list)
    },
    handleClose(index) {
      this.dynamicTags.splice(index, 1)
    }
  }
}
</script>
<style lang="scss">
.ql-editor {
  max-height: 250px;
}

.el-dialog__body {
  padding: 0 20px;
}

.el-radio__label {
  /*display: none;*/
}

.warp {
  width: 80%;
  padding: 30px;
  margin: 0 auto;
}

.el-dialog__body {
  /*text-align: center;*/
}

.el-pagination {
  padding-top: 20px;
}

.iconadd {
  cursor: pointer;
  font-size: 20px;
  margin-left: 10px;
}

.iconlist {
  margin-bottom: 10px;
}

.addicon {

}

.detelicon {
  color: red;
}
</style>
